<template>
    <transition name="dialog-fade">
      <el-dialog
        v-if="showDBCreateDiag"
        :title="DBCreateDiagTitle"
        class="dialog-component"
        :visible.sync="showDBCreateDiag"
        width="700px"
      >
        <el-form
          ref="formInfo"
          :model="formInfo"
          class="demo-form-inline"
          label-width="100px"
        >
        <el-form-item label="任务名称：" prop="任务名称">
            <el-input v-model="formInfo.taskName"></el-input>
          </el-form-item>
          <el-form-item label="可选目标：" prop="可选目标" >
            <el-select v-model="formInfo.value" placeholder="请选择">
              <el-option
                v-for="item in this.formInfo.OptionalDB[0]"
                :key="item.supplierName"
                :label="item.supplierName"
                :value="item.supplierWebsite">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键词：" prop="关键词">
            <el-input v-model="formInfo.keyWords"></el-input>
          </el-form-item>
  
          <el-form-item label="更新模式：" prop="updateMode" required v-show="isVisible">
            <el-select v-model="formInfo.updateMode" placeholder="请选择更新模式">
          <el-option label="全量模式" value="全量"></el-option>
          <el-option label="增量模式" value="增量"></el-option>
        </el-select>
          </el-form-item>
          <el-form-item label="优先级：" prop="priority" required v-show="isVisible">
            <el-select v-model="formInfo.priority" placeholder="请选择优先级">
          <el-option label="低" value="低"></el-option>
          <el-option label="中" value="中"></el-option>
          <el-option label="高" value="高"></el-option>
        </el-select>
          </el-form-item>
          <el-form-item label="爬取深度：" prop="crawlingDepth" required v-show="isVisible">
            <el-input v-model="formInfo.crawlingDepth"></el-input>
          </el-form-item>
          <el-form-item label="采集频率：" prop="crawlingFrequency" required v-show="isVisible">
            <el-input v-model="formInfo.crawlingFrequency"></el-input>
          </el-form-item>
          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="submitForm(formInfo)"
              >确定</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </transition>
  </template>
   
  <script>
  
  
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: "",
      },
      itemInfo: {
        type: Object,
        default: function () {
          return {};
        },
      },
    },
    data() {
      return {
        isVisible:false,
        showDBCreateDiag: false,
        formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
      };
    },
    methods: {
      // 保存操作
      closeDialog(flag) {
        this.showDBCreateDiag = false;
        this.$emit("closeDialog", flag);
      },
      submitForm(formName) {
        // const that = this;
        // that.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     // 走保存请求
        //     this.post(formName.commitUrl,formName)
        //     that.$message({
        //       message: "操作成功！",
        //       type: "success",
        //     });
        //     that.closeDialog(1);
        //   } else {
        //     return false;
        //   }
        // });

            // 走保存请求

            this.post(formName.commitUrl,formName)
            this.closeDialog(1);
            this.$message({
              message: "操作成功！",
              type: "success",
            });
      },
      async post(url,formName) {
        const { data: res } = await this.$axios.post(url, {
          taskName:formName.taskName,
          updateMode:"全量",
          // updateMode:formName.updateMode,
          // priority:formName.priority,
          priority:"高",
          taskState:0,
          userID:formName.userID,
          crawlerType:formName.crawlerType,
          domainUrls:formName.value,
          keywords:formName.keyWords

        })
        console.log(res);
      }
     
    },
    mounted(){
        console.log('iteminfo',this.formInfo);
    }
  };
  
  
  </script>
   
   <style scoped lang="scss">
   .demo-form-inline{
     margin-left: 0px;
   }
   .dialog-fade-enter-active {
     -webkit-animation: dialog-fade-in 0.3s;
     animation: dialog-fade-in 0.3s;
   }
   .dialog-fade-leave-active {
     -webkit-animation: dialog-fade-out 0.3s;
     animation: dialog-fade-out 0.3s;
   }
   @-webkit-keyframes dialog-fade-in {
     0% {
       -webkit-transform: translate3d(0, -20px, 0);
       transform: translate3d(0, -20px, 0);
       opacity: 0;
     }
     100% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
   }
   @keyframes dialog-fade-in {
     0% {
       -webkit-transform: translate3d(0, -20px, 0);
       transform: translate3d(0, -20px, 0);
       opacity: 0;
     }
     100% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
   }
   @-webkit-keyframes dialog-fade-out {
     0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
     100% {
       -webkit-transform: translate3d(0, -20px, 0);
       transform: translate3d(0, -20px, 0);
       opacity: 0;
     }
   }
   @keyframes dialog-fade-out {
     0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
     100% {
       -webkit-transform: translate3d(0, -20px, 0);
       transform: translate3d(0, -20px, 0);
       opacity: 0;
     }
   }
   </style>